<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择流派 - AI网文小说创作助手</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="mobile-common.css" rel="stylesheet">
</head>
<body>
    <div class="mobile-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span class="status-bar-time">9:41</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-2"></i>
                <i class="fas fa-battery-full ml-2 status-bar-battery"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-left">
                <a href="create.html">
                    <i class="fas fa-chevron-left"></i>
                </a>
            </div>
            <div class="nav-title">选择流派</div>
            <div class="nav-right"></div>
        </div>
        
        <!-- 内容区域 -->
        <div class="content">
            <!-- 步骤指示器 -->
            <div class="mb-4">
                <div class="flex items-center justify-between">
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
                            <span>1</span>
                        </div>
                        <span class="text-xs mt-1 text-primary font-semibold">选择流派</span>
                    </div>
                    <div class="flex-1 h-1 bg-gray-200 mx-2 relative">
                        <div class="absolute top-0 left-0 h-1 bg-primary" style="width: 0%"></div>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
                            <span>2</span>
                        </div>
                        <span class="text-xs mt-1 text-gray-500">输入梗概</span>
                    </div>
                    <div class="flex-1 h-1 bg-gray-200 mx-2"></div>
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
                            <span>3</span>
                        </div>
                        <span class="text-xs mt-1 text-gray-500">故事要素</span>
                    </div>
                </div>
            </div>
            
            <!-- 频道选择 -->
            <div class="mb-4">
                <h2 class="text-lg font-bold mb-3">选择频道</h2>
                <div class="flex space-x-3">
                    <button id="male-button" class="btn-male flex-1 py-3 rounded-lg font-bold" onclick="toggleGenreType('male')">
                        <i class="fas fa-mars mr-2"></i> 男频
                    </button>
                    <button id="female-button" class="btn-secondary flex-1 py-3 rounded-lg font-bold" onclick="toggleGenreType('female')">
                        <i class="fas fa-venus mr-2"></i> 女频
                    </button>
                </div>
            </div>
            
            <!-- 流派选择 - 男频 -->
            <div id="male-genres" class="mb-4">
                <h2 class="text-lg font-bold mb-3">选择流派</h2>
                <div class="grid grid-cols-2 gap-3">
                    <div class="card p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="selectGenre(this)">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                                <i class="fas fa-building"></i>
                            </div>
                            <h3 class="font-bold">都市</h3>
                        </div>
                        <p class="text-xs text-secondary">现代都市背景下的故事，主角通常拥有特殊能力或机遇</p>
                    </div>
                    
                    <div class="card p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="selectGenre(this)">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                                <i class="fas fa-dragon"></i>
                            </div>
                            <h3 class="font-bold">玄幻</h3>
                        </div>
                        <p class="text-xs text-secondary">架空世界中的奇幻冒险，通常包含修炼体系和超凡能力</p>
                    </div>
                    
                    <div class="card p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="selectGenre(this)">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
                                <i class="fas fa-mountain"></i>
                            </div>
                            <h3 class="font-bold">仙侠</h3>
                        </div>
                        <p class="text-xs text-secondary">中国传统仙道文化背景，主角修仙问道，追求长生</p>
                    </div>
                    
                    <div class="card p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="selectGenre(this)">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3">
                                <i class="fas fa-rocket"></i>
                            </div>
                            <h3 class="font-bold">科幻</h3>
                        </div>
                        <p class="text-xs text-secondary">未来科技世界的故事，探索科学与人性的边界</p>
                    </div>
                    
                    <div class="card p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="selectGenre(this)">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-3">
                                <i class="fas fa-landmark"></i>
                            </div>
                            <h3 class="font-bold">历史</h3>
                        </div>
                        <p class="text-xs text-secondary">历史背景下的故事，主角在历史长河中谱写传奇</p>
                    </div>
                    
                    <div class="card p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="selectGenre(this)">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-3">
                                <i class="fas fa-gamepad"></i>
                            </div>
                            <h3 class="font-bold">游戏</h3>
                        </div>
                        <p class="text-xs text-secondary">游戏世界中的冒险，主角在虚拟与现实间穿梭</p>
                    </div>
                </div>
            </div>
            
            <!-- 流派选择 - 女频 -->
            <div id="female-genres" class="mb-4 hidden">
                <h2 class="text-lg font-bold mb-3">选择流派</h2>
                <div class="grid grid-cols-2 gap-3">
                    <div class="card p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="selectGenre(this)">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 mr-3">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h3 class="font-bold">现代言情</h3>
                        </div>
                        <p class="text-xs text-secondary">现代都市中的爱情故事，通常包含职场、豪门等元素</p>
                    </div>
                    
                    <div class="card p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="selectGenre(this)">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-3">
                                <i class="fas fa-crown"></i>
                            </div>
                            <h3 class="font-bold">古代言情</h3>
                        </div>
                        <p class="text-xs text-secondary">古代背景下的爱情故事，宫廷、权谋、爱恨情仇</p>
                    </div>
                    
                    <div class="card p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="selectGenre(this)">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                                <i class="fas fa-magic"></i>
                            </div>
                            <h3 class="font-bold">玄幻言情</h3>
                        </div>
                        <p class="text-xs text-secondary">架空玄幻世界中的爱情故事，女主通常拥有特殊能力</p>
                    </div>
                    
                    <div class="card p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="selectGenre(this)">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
                                <i class="fas fa-sync-alt"></i>
                            </div>
                            <h3 class="font-bold">重生逆袭</h3>
                        </div>
                        <p class="text-xs text-secondary">女主重生或穿越后，凭借前世记忆逆袭人生</p>
                    </div>
                    
                    <div class="card p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="selectGenre(this)">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                                <i class="fas fa-briefcase"></i>
                            </div>
                            <h3 class="font-bold">职场甜宠</h3>
                        </div>
                        <p class="text-xs text-secondary">职场背景下的甜蜜爱情，通常男主是高冷总裁</p>
                    </div>
                    
                    <div class="card p-4 hover:shadow-md transition-shadow cursor-pointer" onclick="selectGenre(this)">
                        <div class="flex items-center mb-2">
                            <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-3">
                                <i class="fas fa-search"></i>
                            </div>
                            <h3 class="font-bold">悬疑推理</h3>
                        </div>
                        <p class="text-xs text-secondary">悬疑推理故事，女主通常拥有敏锐洞察力</p>
                    </div>
                </div>
            </div>
            
            <!-- 子流派选择 -->
            <div id="sub-genre-container" class="mb-4 hidden">
                <h2 class="text-lg font-bold mb-3">选择子流派</h2>
                <div id="sub-genre-list" class="grid grid-cols-2 gap-3">
                    <!-- 子流派将通过JS动态生成 -->
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="fixed bottom-24 left-0 right-0 p-4 bg-white border-t">
                <button id="next-button" class="btn btn-primary w-full py-3" disabled onclick="goToNextStep()">
                    下一步：输入梗概
                </button>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <a href="home.html" class="tab-item" data-tab="home">
                <i class="fas fa-home tab-icon"></i>
                <span>首页</span>
            </a>
            <a href="novel-list.html" class="tab-item" data-tab="novels">
                <i class="fas fa-book tab-icon"></i>
                <span>我的小说</span>
            </a>
            <a href="create.html" class="tab-item active" data-tab="create">
                <i class="fas fa-plus-circle tab-icon"></i>
                <span>创作</span>
            </a>
            <a href="inspiration.html" class="tab-item" data-tab="inspiration">
                <i class="fas fa-lightbulb tab-icon"></i>
                <span>灵感</span>
            </a>
            <a href="profile.html" class="tab-item" data-tab="profile">
                <i class="fas fa-user tab-icon"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
    
    <script src="mobile-common.js"></script>
    <script>
        // 当前选择的频道和流派
        let selectedChannel = 'male';
        let selectedGenre = null;
        let selectedSubGenre = null;
        
        // 切换男频/女频
        function toggleGenreType(type) {
            const maleGenres = document.getElementById('male-genres');
            const femaleGenres = document.getElementById('female-genres');
            const maleButton = document.getElementById('male-button');
            const femaleButton = document.getElementById('female-button');
            const subGenreContainer = document.getElementById('sub-genre-container');
            
            // 重置选择状态
            selectedGenre = null;
            selectedSubGenre = null;
            updateNextButton();
            
            // 隐藏子流派选择
            subGenreContainer.classList.add('hidden');
            
            // 移除所有流派的选中状态
            const genres = document.querySelectorAll('.card');
            genres.forEach(genre => {
                genre.classList.remove('border-primary');
                genre.classList.remove('bg-blue-50');
            });
            
            if (type === 'male') {
                selectedChannel = 'male';
                maleGenres.classList.remove('hidden');
                femaleGenres.classList.add('hidden');
                maleButton.classList.add('btn-male');
                maleButton.classList.remove('btn-secondary');
                femaleButton.classList.remove('btn-female');
                femaleButton.classList.add('btn-secondary');
            } else {
                selectedChannel = 'female';
                maleGenres.classList.add('hidden');
                femaleGenres.classList.remove('hidden');
                maleButton.classList.remove('btn-male');
                maleButton.classList.add('btn-secondary');
                femaleButton.classList.add('btn-female');
                femaleButton.classList.remove('btn-secondary');
            }
        }
        
        // 选择流派
        function selectGenre(element) {
            // 移除所有流派的选中状态
            const genres = document.querySelectorAll('.card');
            genres.forEach(genre => {
                genre.classList.remove('border-primary');
                genre.classList.remove('bg-blue-50');
            });
            
            // 添加当前流派的选中状态
            element.classList.add('border-primary');
            element.classList.add('bg-blue-50');
            
            // 获取选中的流派名称
            const genreName = element.querySelector('h3').textContent;
            selectedGenre = genreName;
            
            // 显示子流派选择
            showSubGenres(genreName);
            
            // 更新下一步按钮状态
            updateNextButton();
        }
        
        // 显示子流派
        function showSubGenres(genreName) {
            const subGenreContainer = document.getElementById('sub-genre-container');
            const subGenreList = document.getElementById('sub-genre-list');
            
            // 清空子流派列表
            subGenreList.innerHTML = '';
            
            // 根据选择的流派显示对应的子流派
            let subGenres = [];
            
            if (selectedChannel === 'male') {
                switch (genreName) {
                    case '都市':
                        subGenres = [
                            { name: '异能流', icon: 'bolt' },
                            { name: '职场流', icon: 'briefcase' },
                            { name: '医生流', icon: 'user-md' },
                            { name: '学生流', icon: 'graduation-cap' },
                            { name: '商战流', icon: 'chart-line' },
                            { name: '保镖流', icon: 'shield-alt' }
                        ];
                        break;
                    case '玄幻':
                        subGenres = [
                            { name: '东方玄幻', icon: 'dragon' },
                            { name: '异世大陆', icon: 'globe-asia' },
                            { name: '斗气世界', icon: 'fire' },
                            { name: '武修世界', icon: 'fist-raised' }
                        ];
                        break;
                    // 其他流派的子流派...
                    default:
                        subGenres = [
                            { name: '传统流', icon: 'book' },
                            { name: '创新流', icon: 'lightbulb' }
                        ];
                }
            } else {
                switch (genreName) {
                    case '现代言情':
                        subGenres = [
                            { name: '总裁豪门', icon: 'building' },
                            { name: '都市甜宠', icon: 'heart' },
                            { name: '校园青春', icon: 'school' }
                        ];
                        break;
                    case '古代言情':
                        subGenres = [
                            { name: '宫廷侯门', icon: 'crown' },
                            { name: '江湖儿女', icon: 'mountain' },
                            { name: '种田经商', icon: 'seedling' }
                        ];
                        break;
                    // 其他流派的子流派...
                    default:
                        subGenres = [
                            { name: '传统流', icon: 'book' },
                            { name: '创新流', icon: 'lightbulb' }
                        ];
                }
            }
            
            // 生成子流派HTML
            subGenres.forEach(subGenre => {
                const subGenreItem = document.createElement('div');
                subGenreItem.className = 'card p-4 hover:shadow-md transition-shadow cursor-pointer';
                subGenreItem.onclick = function() { selectSubGenre(this); };
                
                subGenreItem.innerHTML = `
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center text-primary mr-3">
                            <i class="fas fa-${subGenre.icon}"></i>
                        </div>
                        <h3 class="font-bold">${subGenre.name}</h3>
                    </div>
                `;
                
                subGenreList.appendChild(subGenreItem);
            });
            
            // 显示子流派容器
            subGenreContainer.classList.remove('hidden');
        }
        
        // 选择子流派
        function selectSubGenre(element) {
            // 移除所有子流派的选中状态
            const subGenres = document.querySelectorAll('#sub-genre-list .card');
            subGenres.forEach(subGenre => {
                subGenre.classList.remove('border-primary');
                subGenre.classList.remove('bg-blue-50');
            });
            
            // 添加当前子流派的选中状态
            element.classList.add('border-primary');
            element.classList.add('bg-blue-50');
            
            // 获取选中的子流派名称
            const subGenreName = element.querySelector('h3').textContent;
            selectedSubGenre = subGenreName;
            
            // 更新下一步按钮状态
            updateNextButton();
        }
        
        // 更新下一步按钮状态
        function updateNextButton() {
            const nextButton = document.getElementById('next-button');
            
            if (selectedGenre && selectedSubGenre) {
                nextButton.disabled = false;
            } else {
                nextButton.disabled = true;
            }
        }
        
        // 前往下一步
        function goToNextStep() {
            // 保存选择的频道和流派
            localStorage.setItem('selectedChannel', selectedChannel);
            localStorage.setItem('selectedGenre', selectedGenre);
            localStorage.setItem('selectedSubGenre', selectedSubGenre);
            
            // 跳转到下一步
            window.location.href = 'story-outline.html';
        }
    </script>
    <style>
        /* 额外样式 */
        .btn-male {
            background-color: #3b82f6;
            color: white;
        }
        
        .btn-female {
            background-color: #ec4899;
            color: white;
        }
        
        .border-primary {
            border: 2px solid var(--primary-color);
        }
    </style>
</body>
</html> 